<template>
    <div class="header">律师</div>
    <van-tabs v-model="activeName">
        <van-tab title="知识" name="a">
            <div class="container">
                <van-field v-model="text" placeholder="搜索关键词" />
                <div class="list-box">
                    <div class="list-detail">
                        <p class="detail-text">来源</p>
                        <p class="detail-title">中华人民共和国立法</p>
                        <p>2004年全国人民代表大会</p>
                        <div class="detail-info">
                            文字来源
                            时间
                            |
                            其他信息
                        </div>
                    </div>
                    <div class="list-detail">
                        <p class="detail-text">来源</p>
                        <p class="detail-title">中华人民共和国立法</p>
                        <p>2004年全国人民代表大会</p>
                        <div class="detail-info">
                            文字来源
                            时间
                            |
                            其他信息
                        </div>
                    </div>
                    <div class="list-detail">
                        <p class="detail-text">来源</p>
                        <p class="detail-title">中华人民共和国立法</p>
                        <p>2004年全国人民代表大会</p>
                        <div class="detail-info">
                            文字来源
                            时间
                            |
                            其他信息
                        </div>
                    </div>
                </div>
            </div>
        </van-tab>
        <van-tab title="日程" name="b">
            <van-calendar v-model:show="show" switch-mode="month" :poppable="false" :show-confirm="false" :style="{ height: '450px' }"/>
            <div class="container">
                
                <div class="time-box">
                    <div class="time-detail">
                        <p>
                            <span>重要且紧急</span>
                            <img src="../../assets/add.jpg" />
                        </p>
                        <div>
                            <p>日程1</p>
                            <p>日程2</p>
                        </div>
                    </div>
                    <div class="time-detail">
                        <p style="color:orange">
                            <span>重要不紧急</span>
                            <img src="../../assets/add.jpg" />
                        </p>
                        <div>
                            <p>日程1</p>
                            <p>日程2</p>
                        </div>
                    </div>
                    <div class="time-detail">
                        <p style="color:#5A63AE">
                            <span>不重要但紧急</span>
                            <img src="../../assets/add.jpg" />
                        </p>
                        <div>
                            <p>日程1</p>
                            <p>日程2</p>
                        </div>
                    </div>
                </div>
            </div>
        </van-tab>
        <van-tab title="案件" name="c">
            <div class="container">
                <van-field v-model="text" placeholder="请输入案件名称" />
                <div class="case-box">
                    <div class="case-detail">
                        <img src="../../assets/3.png" />
                        <p>案件1</p>
                    </div>
                    <div class="case-detail">
                        <img src="../../assets/3.png" />
                        <p>案件2</p>
                    </div>
                </div>
            </div>
        </van-tab>
    </van-tabs>
</template>

<script setup>
import { ref } from 'vue';

const activeName = ref('a')
const show = ref(true)
</script>

<style scoped lang="less">
.header{
    width:100%;
    height:60px;
    color:white;
    background:#5A63AE;
    display:flex;
    align-items: center;
    justify-content: center
}
.container{
    padding:20px 10px;
    padding-bottom: 80px;
    background:#DDE0EF;
}
.list-detail{
    margin-bottom:20px;
    padding:20px;
    background:white;
    border-radius:5px;
}
.detail-text{
    border-bottom:1px solid #f2f2f2;
    padding-bottom:10px;
    font-weight:bold;
    color:#5A63AE;
}
.time-detail{
    // border:1px solid gray;
    margin:20px 0;
    background:white;
    &>p{
        padding:15px;
        border-bottom:1px solid #f2f2f2;
        color:red;
        display:flex;
        align-items: center;
        justify-content: space-between;
        img{
            width:20px;
            height:20px;
        }
    }
    div{
        padding:15px;
        p{
            margin-bottom:15px;
        }
    }
}
.detail-info{
    color:gray;
    margin-top:20px;
}
.case-detail{
    padding:20px;
    // border:1px solid #5A63AE;
    margin:20px 0;
    font-weight: bold;
    background:white;
    display:flex;
    align-items: center;
    img{
        width:60px;
        height:60px;
    }
}
/deep/.van-field{
    // border:1px solid #5A63AE;
    margin-bottom:20px;
}
/deep/.van-calendar__header-title{
    display:none;
}
/deep/.van-calendar__selected-day{
    background:#5A63AE;
}
.detail-title{
    margin:10px 0;
    font-weight:bold;
}
</style>
